<template>
  <div class="footer" v-show="state">
      <div class="icon">
        <div class="ficon">
            <div></div>
            <div>全天候服务</div>
        </div>
        <div class="ficon">
            <div></div>
            <div>资深专家1v1</div>
        </div>
        <div class="ficon">
            <div></div>
            <div>
                合法合规<br>100亿资金保障
            </div>
        </div>
        <div class="ficon">
            <div></div>
            <div>
                平安银行监管<br>安全可靠
            </div>
        </div>
      </div>
      <div class="hot">
          <div>热门产品：</div>
          <router-link class="hitem" to="/ishouru.html" tag="div">爱收入</router-link>
          <router-link class="hitem" to="/shebao/" tag="div">个人社保</router-link>
          <router-link class="hitem" to="/shuichou/" tag="div">合规税筹</router-link>
          <router-link class="hitem" to="/canji/" tag="div">残疾人就业</router-link>
      </div>
      <div class="we">
          <div>关注我们：</div>
          <div class="witem" @click="show">微信</div>
          <!-- <div class="witem"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3312987519&site=qq&menu=yes">QQ</a></div> -->
          <div class="witem" @click="consult">在线客服</div><br>
          <div class="center">
              <router-link to="/aboutus/1" class="witem" tag="div">关于我们</router-link>
              <span>|</span>
              <router-link to="/sitemap/" class="witem" tag="div">网站地图</router-link>
          </div>
      </div>
      <div class="tel">
          <a href="tel:4001667880">服务咨询：400-1667-880</a>
      </div>
      <div class="copy">
          Copyright 2014 - 2017 粤ICP备14088498-1号
      </div>
      <div v-show="code" @click="hide" id="code">
        <img src="~@/assets/code.png">
        <p>
          长按识别或截图保存<br>
          关注公众号，企业服务一手掌握
        </p>
      </div>
  </div>
</template>
<script>
export default {
  props: ['state'],
  data() {
    return {
      code: false
    }
  },
  methods: {
    consult() {
      location.href = 'https://qiyukf.com/client?k=3bb03a223ff45e6fc1e527ce74cd25e3&u=&d=elxhcgubcppxvblfv3bv&uuid=toevh0zihxwvonhknh3z&gid=0&sid=0&qtype=0&dvctimer=0&robotShuntSwitch=0&hc=0&robotId=0&t=%25E5%258C%2597%25E4%25BA%25AC%25E5%2590%2588%25E7%2590%2586%25E9%2581%25BF%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E4%25BC%2581%25E4%25B8%259A%25E9%2581%25BF%25E7%25A8%258E%25E8%258A%2582%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E7%25A8%258E%25E7%25AD%25B9%25E4%25BC%2598%25E5%258C%2596_%25E7%2588%25B1%25E5%2591%2598%25E5%25B7%25A5'
    },
    show() {
      this.code = true
    },
    hide() {
      this.code = false
    }
  }
};
</script>
<style scoped>
.footer {
  position: relative;
  background-color: #282828;
  padding: 0 0.35rem;
  z-index: 1;
}
.icon {
  display: flex;
  justify-content: space-between;
  padding-top: 0.3rem;
  padding-bottom: 0.35rem;
  border-bottom: 0.01rem solid #3c3c3c;
}
.ficon {
  text-align: center;
}
.ficon > div:nth-child(1) {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-size: contain;
  margin-bottom: 0.2rem;
}
.ficon > div:nth-child(2) {
  font-size: 0.22rem;
  color: #858585;
}
.icon>.ficon:nth-child(1)>div:nth-child(1){
  background-image: url("~@/assets/f_0.png");
}
.icon>.ficon:nth-child(2)>div:nth-child(1){
  background-image: url("~@/assets/f_1.png");
}
.icon>.ficon:nth-child(3)>div:nth-child(1){
  background-image: url("~@/assets/f_2.png");
}
.icon>.ficon:nth-child(4)>div:nth-child(1){
  background-image: url("~@/assets/f_3.png");
}
.hot {
  margin-top: 0.7rem;
  font-size: 0.24rem;
  line-height: 0.48rem;
  overflow: hidden;
}
.hot > div:nth-child(1) {
  color: #666;
}
.hitem {
  display: inline-block;
  color: #999;
  float: left;
  margin-right: 0.3rem;
}
.we {
  margin-top: 0.2rem;
  font-size: 0.24rem;
  line-height: 0.48rem;
  overflow: hidden;
  padding-bottom: 0.3rem;
  border-bottom: 0.01rem solid #3c3c3c;
  color: #999;
}
.we > div:nth-child(1) {
  color: #666;
}
.center{
    text-align: center;
}
.center>div{
    float: none;
    margin: unset;
}
.center>span{
  margin: 0 0.08rem;
}
.witem {
  display: inline-block;
  float: left;
  margin-right: 0.3rem;
}
.tel {
  width: 4rem;
  height: 0.64rem;
  border: 0.01rem solid #c04560;
  border-radius: 0.32rem;
  font-size: 0.26rem;
  line-height: 0.64rem;
  text-align: center;
  margin: 0.45rem auto 0.3rem;
}
.tel>a{
  color: #c04560;
}
.copy {
  color: #575757;
  font-size: 0.24rem;
  text-align: center;
  padding-bottom: 0.1rem;
}
a {
  text-decoration: none;
  color: #bebebe;
}
#code{
  position: fixed;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding-top: calc(50vh - 3.6rem);
  text-align: center;
}
#code>img{
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.24rem;
}
#code>p{
  color: #fff;
  font-size: 0.32rem;
  line-height: 0.54rem;
}
</style>
